<template>
	<view class="swiper-card" :style="{margin}">
			<swiper class="swiper" :style="{height}" circular autoplay indicator-dots>
				<swiper-item v-for="(item, index) in data" :key="index">
					<image :src="item.image" mode="" class="image" :style="{height}" @click="onImage(item.content)"></image>
				</swiper-item>
			</swiper>
		
	</view>

</template>

<script setup>
	import {
		ref
	} from "vue"

	defineProps({
		margin: {
			type: String,
			default: '0rpx'
		},
		height: {
			type: String,
			default: '300rpx'
		},
		data: Array
	})

	const onImage = (url) => {
		if (!url) return false;
		uni.navigateTo({
			url
		})
	}

	// let list = ref([{
	// 		url: "/static/images/1.png"
	// 	},
	// 	{
	// 		url: "/static/images/2.jpeg"
	// 	},
	// ])



	const change = () => {

	}
</script>

<style lang="scss" scoped>
	.swiper-card {
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 -3rpx 30rpx rgba(0, 0, 0, .1);
	}

	.swiper {
		overflow: hidden;
		background: #333;

		.image {
			width: 100%;
		}
	}
</style>